<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" href="/css/logicss/common.css" media="all" />
<link rel="stylesheet" type="text/css" href="/css/logicss/print.css" media="print" />
<style type="text/css" media="screen">
	@import '/css/logicss/form/basic.css';
    @import '/css/logicss/utils.css';
    @import '/css/logicss/font/mix.css';
    @import '/css/logicss/typography/small.css';
    @import '/css/logicss/grid/e24m.css';
    @import '/css/logicss/extras/palette/dark.css';
    @import '/css/logicss/extras/list/common.css';
    #nav-site { margin-top: 1.75em; }
</style>
<link rel="stylesheet" type="text/css" href="/css/user/register.css" media="all" />
<script type="text/javascript" src="/js/jquery-1.4.4.js"></script>
<script type="text/javascript" src="/js/user/check.js"></script>
<script type="text/javascript">
var xmlHttp = false;

var send1=false;
var send2=false;
var send3=false;
var send4=false;

try {
	  xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
	  try {
	    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
	  } catch (e2) {
	    xmlHttp = false;
	  }
}
if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {
  xmlHttp = new XMLHttpRequest();
}

var checkNameInfo;
var checkPwdInfo;
var checkPwdRInfo;
var checkEml;

$(document).ready(function(){
	checkNameInfo = document.getElementById("warninginfo");
	checkPwdInfo = document.getElementById("warninginfo");
	checkPwdRInfo = document.getElementById("warninginfo");
	checkEml = document.getElementById("warninginfo");
});

function checkName()
{
	var u_name = document.getElementById("registerForm").name.value;
	var patrnName = /^[a-zA-Z]{4,30}$/;
	if (!patrnName.exec(u_name)) {
		checkNameInfo.innerHTML="Your name must be 4-30 characters with no number.";
		send1=false;
	}
	else {
		var url = "checkName.do?name=" + escape(u_name);
		xmlHttp.open("GET", url, true);
		xmlHttp.onreadystatechange = checkNameFromServer;
		xmlHttp.send(null);  
	}
}
	
function checkNameFromServer()
{
	if (xmlHttp.readyState < 4) {
		checkNameInfo.innerHTML="loading...";
	}
	if (xmlHttp.readyState == 4) {
		var response = xmlHttp.responseText;
		if (response == "used") {
			checkNameInfo.innerHTML="this id has been already used";
			send1=false;
		}
		else {
			checkNameInfo.innerHTML="OK. You can use it.";
			send1=true;
		}
	}
}

function checkPwd()
{
	var password=document.getElementById("registerForm").password.value;
	var patrnPwd=/^(\w){6,20}$/;
	if (!patrnPwd.exec(password))
	{
		checkPwdInfo.innerHTML="Your password must be from 6-20 characters.";
		send2=false;
		return;
	}
	checkPwdInfo.innerHTML="";
	send2=true;
	return;
}

function checkPwdR()
{
	var password=document.getElementById("registerForm").password.value;
	var passwordRepeat=document.getElementById("registerForm").passwordr.value;
	if(password!=passwordRepeat)
	{
		checkPwdRInfo.innerHTML="Check your passowrd again please";
		send3=false;
		return;
	}
	checkPwdRInfo.innerHTML="";
	send3=true;
	return;
}

function checkEml()
{
	var email=document.getElementById("registerForm").email.value;	
	var patrnEml=/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/; 
	if(!patrnEml.exec(email))
	{
		checkEml.innerHTML="Input your email please.";
		send4=false;
		return;
	}
	checkEml.innerHTML="";
	send4=true;
	return;
}

function checkForm()
{	
	if(send1 == true && send2 == true && send3 == true)
	{
		send1=false;
		send2=false;
		send3=false;
		send4=false;
		return true;	
	}
	alert("Your information is not correct!Check it again please!");
	return false;
}

	$(document).ready(function(){
		$("input[name='name']").change(checkName);
		$("input[name='password']").change(checkPwd);
		$("input[name='passwordr']").change(checkPwdR);
		$("input[name='email']").change(checkEml);
	});
</script>
<title>营养强化食品配方管理系统-创建账户</title>
</head>

<body id="register">
<div id="container">
	<div id="header" class="content grid">
		<div id="logo" class="first col">
			<img src="/images/logos/logo_small.jpg"/>
		</div>
		<hr />
	</div>
	<div id="content" class="content">
		<div id="regdiv" class="content" >
		<form action="registerService.do" method="get" id="registerForm" class="content" onsubmit="checkForm()">
			<div id="reghead" class="content">
				<h3>创建账户:</h3>
				<p id="warninginfo"></p>
			</div>
			<div id="regform" class="content">
				<table border="0" class="register">
					<tbody>
						<tr>
							<td>用户名：</td>
							<td>
								<input type="text" name="name" />
							</td>
						</tr>
						<tr>
							<td>密码：</td>
							<td>
								<input type="password" name="password" />
							</td>
						</tr>
						<tr>
							<td>确认密码：</td>
							<td>
								<input type="password" name="passwordr" />
							</td>
						</tr>
						<tr>
							<td>Email：</td>
							<td>
								<input type="text" name="email" />
							</td>
						</tr>
						<tr>
							<td>是否是管理员：</td>
							<td>
								<input type="checkbox" name="admin" />
							</td>
						</tr>
						<tr>
							<td><input type=submit  value ="注册" /></td>
						</tr>
					</tbody>
				</table>
			</div>
			<div id="reginfo" class="content">
				<p>已有帐号？现在<a href = "/user/signIn.do">登录</a></p>
			</div>
		</form>
		</div>
	</div>
	<div id="footer" class="content"></div>
</div>
<div class="foot">
</div>
</body>
</html>
